.top {
    margin: (30/750)*100vw auto auto;
    padding: (20/750)*100vw;
    width: (630/750)*100vw;
    background-color: #fff;
    border-radius: (12/750)*100vw;
    .h-top {
        display: flex;
        flex-direction: column;
        text-align: center;
        .cover {
            margin: auto;
            width: (115/750)*100vw;
            height: (153/750)*100vw;
        }
        .name {
            margin-bottom: (20/750)*100vw;
            font-size: (30/750)*100vw;
            font-weight: 600;
        }
    }
    .brief {
        font-size: (28/750)*100vw;
    }

}
.middle {
    margin: (20/750)*100vw auto (30/750)*100vw;
    text-align: center;
    width:  (670/750)*100vw;
    
    .title {
        display: inline-block;
        // margin: auto;
    }
    .upload, .word {
        float: left;
        width:  (100/750)*100vw;
        height:  (50/750)*100vw;
        border: none;
        border-radius: (10/750)*100vw;
        background: #fff;
        font-weight: 600;
    }
    .word {
        float: right;
    }
}
.chaper {
    li {
        margin: auto auto (15/750)*100vw;
        width: (670/750)*100vw;
        height: (70/750)*100vw;
        background: #fff;
        border-radius: (12/750)*100vw;
        overflow: hidden;
        img {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            margin-left: (20/750)*100vw;
            width: (52/750)*100vw;
            height: (39/750)*100vw;
            background-size: (52/750)*100vw (39/750)*100vw;
            
        }
        .chaper-name {
            line-height: (70/750)*100vw;
        }
    }
}